import React, { Component } from 'react';
import { connect } from 'dva';
import { Form, Input, Button, Icon } from 'antd';
import Logo from '../../resources/images/common/login-icon@2x.png';

import './styles.less';

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 14 },
};

class Login extends Component {
  componentDidMount() {
  }
  handleSubmit = () => {
    const { form, dispatch } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'login/doLogin',
          payload: values,
        });
      }
    });
  }
  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    return (
      <div className="login-pages">
        <div className="login-cell">
          <Form
            className="login-form"
            hideRequiredMark={true}
            onSubmit={(e) => {
              e.preventDefault();
              this.handleSubmit();
            }}
          >
            <div className="header-cell">
              <p className="title">商户后台登录</p>
            </div>
            <div className="login-area">
              <FormItem {...formItemLayout}>
                { getFieldDecorator('merchantNo', {
                  rules: [{ required: true, message: '请输入商户号!', whitespace: true }],
                })(
                  <Input
                    size="large"
                    style={{width: 280}}
                    type="text"
                    placeholder="请输入用户名"
                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  />,
                )}
              </FormItem>
              <FormItem {...formItemLayout}>
                { getFieldDecorator('password', {
                  rules: [{ required: true, message: '请输入密码!', whitespace: true }],
                })(
                  <Input
                    size="large"
                    style={{width: 280}}
                    type="password"
                    placeholder="请输入密码"
                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  />,
                )}
              </FormItem>
              <Button size="large" htmlType="submit" type="primary" className="login-btn">登 录</Button>             
            </div>
          </Form>
        </div>
        <div className="login-icon" />
      </div>
    );
  }
}


export default connect((state) => {
  return {
    login: state.login,
  };
})(Form.create()(Login));
